<template>
    <div>
        <van-nav-bar
            title="求职意向管理"
            left-arrow
            @click-left="closeMaskFn"
            />

        <h1 class='titleSty'>管理求职意向</h1>
        <van-nav-bar
            left-text= "求职状态"
            :right-text="jobStateName"
            @click-right="openJobStateFn"
            />
        <!-- 求职状态的列表，从下向上升起 -->
        <van-action-sheet v-model="show" 
            :actions="actions" @select="onSelect" />
    </div>
</template>

<script>
export default {
    name: 'jobState',
    data(){
        return{
            msg:'求职意向管理组件',
            show: false,
            jobStateName:'请选择>>',

            actions: [
                { name: '离职-随时到岗',is_state: 0 },
                { name: '在职-随时到岗',is_state: 1 },
                { name: '在职-考虑机会',is_state: 2 },
                { name: '在职-暂不考虑',is_state: 3 }
            ]
        }
    },
    methods:{
        closeMaskFn(){
            this.$emit('closeJobStateFn')
        },
        openJobStateFn(){
            this.show=true;
        },
        onSelect(item) {
            // 默认情况下点击选项时不会自动收起
            // 可以通过 close-on-click-action 属性开启自动收起
            this.show = false;
            // console.log(item.name)
            this.jobStateName= item.name+'>>'
        }
    }

  
}
</script>

<style scoped>
.titleSty{font-size: .3rem;font-weight: bold;margin-left: .3rem;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

.div_p{
	font-size: .1rem;color: #969696;margin-left: .25rem;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jobState{
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jobState_footer{text-align: center;margin: 2rem 0;}
</style>